<template>
  <section class="home-container">
    <a-card
      class="home-card"
      title="{{appName}}"
    >
      <p>欢迎进入微应用 - {{appName}}</p>
      <p>微应用提供包括但不限于以下系统能力</p>
      <a-tabs
        default-active-key="1"
      >
        <a-tab-pane
          key="1"
          tab="读取目录文件"
        >
          <a-button
            type="primary"
            @click="readDirFiles"
          >
            读取目录文件
          </a-button>
          <a-list
            item-layout="horizontal"
            :data-source="fileList"
          >
            <a-list-item
              slot="renderItem"
              :key="index"
              slot-scope="item, index"
            >
              <p v-text="item"></p>
            </a-list-item>
          </a-list>
        </a-tab-pane>
        <a-tab-pane
          key="2"
          tab="唤起 APP"
          force-render
        >
          <a-button
            type="primary"
            @click="openQQ"
          >
            唤起 QQ
          </a-button>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </section>
</template>
<script>
import nativeModule from '@/native';
export default {
  name: 'Home',

  data() {
    return {
      fileList: []
    };
  },

  methods: {
    async readDirFiles() {
      const fileList = await nativeModule.native.system.readDirFiles();
      this.fileList = fileList;
    },

    openQQ() {
      console.log('openQQ');
      nativeModule.native.system.open('/Applications/QQ.app');
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  width: 100vw;
}
</style>
